<!DOCTYPE html>
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  
  <title>SVG Fireworks</title>
  <link rel="stylesheet" href="css/reset.min.css">
<link rel="stylesheet" href="css/style.css">

</head>
<body>
<!-- partial:index.partial.html -->
<div class="bg"></div>
<svg stroke="#fff" stroke-linecap="round">
  <g class="stage">
    <rect width="100%" height="100%" fill="rgba(0,0,0,0)" stroke="none"></rect>
  </g>
  <g class="toggle" style="cursor:pointer;user-select:none">
    <path d="M100,20 118,20" stroke-width="25"></path>
    <path class="knob" d="M100,20 100,20" stroke-width="20" stroke="#000" data-svg-origin="100 20" transform="matrix(1,0,0,1,0,0)" style="translate: none; rotate: none; scale: none; transform-origin: 0px 0px;"></path>
    <text class="txt1" fill="#fff" x="11" y="26" style="opacity: 1;">Manual</text>
    <text class="txt2" fill="#fff" x="144" y="26" opacity="0.3" style="opacity: 0.3;">Auto</text>
  </g>
</svg>
<!-- partial -->
  <script src="js/gsap.min.js"></script><script src="js/script.js"></script>



</body></html>